<template>
  <div class="mode">
    <div class="view clearfix">
      <span class="fl">收款方式：</span>
      <ul class="fl">
        <li class="zhifubao">
          <i></i>支付宝
        </li>
        <li class="weixin">
          <i></i>微信
        </li>
        <li class="yinhangka">
          <i></i>银行卡
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {}
  },
  activated: function () {},
  mounted: function () {},
  methods: {},
  destroyed: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.mode {
  margin-top: 0.6rem;
  background: #fff;
  .view {
    width: 6.9rem;
    margin-left: auto;
    margin-right: auto;
    span {
      line-height: 1rem;
      font-size: 0.32rem;
      color: #313131;
      width: 2.16rem;
    }
    ul {
      width: 4.74rem;
      li {
        height: 1rem;
        line-height: 1rem;
        margin-top: 0.01rem;
        font-size: 0.3rem;
        color: #313131;
        background: url("../include/img/select_right.png") no-repeat center
          right;
        background-size: 0.19rem 0.37rem;
        cursor: pointer;
        i {
          display: inline-block;
          width: 0.48rem;
          height: 1rem;
          background-repeat: no-repeat;
          background-position: center;
          vertical-align: middle;
          margin-right: 0.3rem;
        }
        &.zhifubao {
          i {
            background-image: url("../include/img/mode_ico1.png");
            background-size: 0.36rem 0.36rem;
          }
        }
        &.weixin {
          i {
            background-image: url("../include/img/mode_ico2.png");
            background-size: 0.36rem 0.36rem;
          }
        }
        &.yinhangka {
          i {
            background-image: url("../include/img/mode_ico3.png");
            background-size: 0.48rem 0.3rem;
          }
        }
      }
    }
  }
}
</style>
